<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>动画</title>	
	<style type="text/css">
		*{margin:0;padding:0;}
		body{font-size:12px;font-family:"微软雅黑"}
		.flow{width:100%;background:#000;margin-top:100px;padding:40px 0;}
		.flow .f_all{width:1198px;margin:0 auto;}
		.flow .f_all dl{width:270px;color:#fff;font-size:14px;text-align:center;float:left;padding-left:20px;}
		.flow .f_all dl dt{width:136px;height:136px;background:url("images/258.png") no-repeat;margin:0 auto;}
		.flow .f_all dl .one{background:url("images/258.png") no-repeat;}
		.flow .f_all dl .two{background:url("images/270.png") no-repeat;}
		.flow .f_all dl .three{background:url("images/266.png") no-repeat;}
		.flow .f_all dl .four{background:url("images/273.png") no-repeat;}
		.flow .f_all dl .f_first{font-size:16px;font-weight:600;margin:10px 0 10px 0;}
		.flow .f_all dl dd i{width:50px;height:0;border-bottom:1px solid #d3d3d3;display:block;margin:10px auto;}
		.flow .f_all dl .f_desc{color:#e0e0e0;}
		/*----清除浮动----*/
		.clear{clear:both;}
	
	</style>
	<!--引入jQuery版的css，里面封装了所有css3的效果-->
	<link href="css/animate.css" rel="stylesheet" type="text/css" />
	
 </head>
 <body>
	<br/>
	<h2>潭州网页学习动画</h2><br/>
	<hr>
	<div class="flow">
		<div class="f_all">
			<!--dl start-->
			<dl>
				<dt class="one"></dt>
				<dd class="f_first">
					1.起步
					<i></i>
				</dd>
				<dd class="f_desc">从网页零基础开始，教你布局.</dd>
			</dl>

			<dl>
				<dt class="two"></dt>
				<dd class="f_first">
					2.计划
					<i></i>
				</dd>
				<dd class="f_desc">开发通用组件，按钮，弹出，窗口.</dd>
			</dl>

			<dl>
				<dt class="three"></dt>
				<dd class="f_first">
					3.执行
					<i></i>
				</dd>
				<dd class="f_desc">同步布局和组件搭建网页效果.</dd>
			</dl>

			<dl>
				<dt class="four"></dt>
				<dd class="f_first">
					4.结果
					<i></i>
				</dd>
				<dd class="f_desc">做出各种应用网站和酷炫的效果.</dd>
			</dl>

			<!--end dl-->
			<div class="clear"></div>
		</div>
	</div>

	 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	 <script type="text/javascript">
		$(function(){
			$(".flow dt").addClass("animated swing");

			$(".flow dt").hover(function(){
				$(this).toggleClass("swing").addClass("bounceIn");
			},function(){
				$(this).toggleClass("bounceIn").addClass("swing");
			});
		});
	 </script>
 </body>
</html>